:root {
	box-sizing: border-box;
}

.box-border-box{
	box-sizing: border-box;
}

.flex {
	display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.self-baseline{
	align-self: baseline;
}

.self-center{
	align-self: center;
}

.self-start{
	align-self: flex-start;
}

.self-end{
	align-self: flex-end;
}

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.white-space-nowrap{
	white-space: nowrap;
}

.h-full{
	height: 100% !important;
}

.vh-100{
	height: 100vh;
}

.w-full{
	width: 100% !important;
}

.text-center{
	text-align: center;
}

@for $i from 0 through 100 {
	@if $i % 2 == 0 or $i % 5 == 0 {
		.m-#{$i} {
			margin: $i + rpx!important;
		}
		
		.m-x-#{$i} {
			margin-left: $i + rpx!important;
			margin-right: $i + rpx!important;
		}
		
		.m-y-#{$i} {
			margin-top: $i + rpx!important;
			margin-bottom: $i + rpx!important;
		}
		
		.p-#{$i} {
			padding: $i + rpx!important;
		}
		
		.p-x-#{$i} {
			padding-left: $i + rpx!important;
			padding-right: $i + rpx!important;
		}
		
		.p-y-#{$i} {
			padding-top: $i + rpx!important;
			padding-bottom: $i + rpx!important;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			.m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			.p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
		}
	}
}

.m-t-auto{
	margin-top: auto !important;
}

.m-b-auto{
	margin-bottom: auto !important;
}

.m-l-auto{
	margin-left: auto !important;
}

.m-r-auto{
	margin-right: auto !important;
}

.m-x-auto{
	margin: 0 auto !important;
}

.m-y-auto{
	margin: auto 0 !important;
}

@for $i from 1 through 5 {
	.line-#{$i} {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: $i;
		text-overflow: ellipsis;
		overflow: hidden;
		/* #endif */
		
		/* #ifndef APP-NVUE */
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == 1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
		/* #endif */
	}
}

.position-relative{
	position: relative;
}

.position-absolute{
	position: absolute;
}

.overflow-hidden{
	overflow: hidden;
}

.block{
	display: block;
}

.inline-block{
	display: inline-block;
}